<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图像的放大镜</title>
	<style type="text/css">
		body {
			background-color: #000;
		}
		* {
			padding: 0;
			margin: 0;
		}
		.canvas-box {
			padding-top: 30px;
			text-align: center;
		}
		canvas {
			display: inline-block;
			border: 1px solid #999;
		}
		.action {
			padding-top: 20px;
			text-align: center;
		}
		.action button {
			padding: 4px 9px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="canvas-box">
		<canvas id="canvas-a">
			您的浏览器太旧了,不支持canvas标签，请升级您的浏览器
		</canvas>
		<canvas id="canvas-b">
			您的浏览器太旧了,不支持canvas标签，请升级您的浏览器
		</canvas>
	</div>
	<div class="action">
		<button id="filter">filter</button>
		<button id="grey-filter">grey-filter</button>
		<button id="black-white-filter">black-white-filter</button>
		<button id="reverse-filter">reverse-filter</button>
		<button id="blur-filter">blur-filter</button>
	</div>
	<script src="js/images_filter.js"></script>
</body>
</html>
